<template>
  <div>
    <h3>侦听器</h3>
    <input type="text" v-model.lazy="name">


  </div>
</template>

<script>
export default {
   // data放数据；methods放方法；computed放计算属性；watch放侦听器
  data(){
    return{
      name:'zhangsan',
      dog:{
        uname: '二狗',
        age: 5
      }
    }
  },
  // 侦听器要写到和data平级的watch中
  watch:{
      // 函数写法
       // 数据项 (新值, 原值) {   }
      // name(newVal,oldVal){
      //   console.log(newVal,oldVal);
      // },
      // 对象写法  // 数据项: {
                  //   handler (新值, 原值) {},
                  //   immediate: true, // 可选
                  //   deep: true // 可选
                  // }
      name:{
        handler(newVal,oldVal){
          console.log(newVal,oldVal);
        }, 
        immediate: true // 表示页面刷新后，马上侦听一次 username 的值
      },
      dog:{
        handler(newVal){
          console.log(newVal);
        },
        deep: true // 表示深度侦听，当对象的任意属性改变后，都会触发该侦听器
      },
    // 监听某个对象
    'dog.age'(newVal,oldVal){
      console.log(newVal,oldVal);
    }
  }
}
</script>

<style>

</style>